<template>
  <div class=''>
    <div class="homecontainer">
      <div class="homecontainer-top">
        <div class="leftdiv">
          <div class="leftone">
            <titleborder title="机柜">
              <leftone />
            </titleborder>
          </div>
          <div class="lefttwo">
            <titleborder title="告警列表">
              <lefttwo />
            </titleborder>
          </div>
        </div>
        <div class="maindiv">
          <normalborder>
            <!-- <lefttwo /> -->
            <mainmap />
          </normalborder>
        </div>
        <div class="rightdiv">
          <div class="rightone">
            <titleborder title="数据量">
              <rightone />
            </titleborder>
          </div>
          <div class="righttwo">
            <titleborder title="温湿度">
              <righttwo />
            </titleborder>
          </div>
        </div>
      </div>
      <div class="homecontainer-bottom">
        <div class="bottomdiv">
          <div class="mainbottom">
            <titleborder title="通信状态">
              <mainbottom />
            </titleborder>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import leftone from "./leftone";
import lefttwo from "./lefttwo";
import mainmap from "./mainmap";
import mainbottom from "./mainbottom/index.vue";
import rightone from "./rightone";
import righttwo from "./righttwo/index.vue";

import titleborder from "../title-border.vue";
import normalborder from "../normalborder.vue";
 

export default {
  components: {
    leftone,
    lefttwo,
    mainmap,
    mainbottom,
    rightone,
    righttwo,
    titleborder,
    normalborder,
  },
  data() {
    return {
    };
  },
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    
  },
}
</script>
<style lang='scss' scoped>
.homecontainer {
  // border: 1px solid #aaa;
  // background-color:#666;
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  .homecontainer-top {
    flex: 10;
    display: flex;
    flex-direction: row;
    .leftdiv {
      flex: 2;
      display: flex;
      flex-direction: column;
      padding: 0px 0px 0px 45px;
      .leftone {
        padding-top: 10px;
        flex: 3;

      }
      .lefttwo {
        padding-top: 10px;
        flex: 6;
      }
    }
    .maindiv {
      flex: 4;
      padding: 20px 10px 0px 10px;
      // padding: 50px;
    }
    .rightdiv {
      flex: 2;
      display: flex;
      flex-direction: column;
      padding: 0px 45px 0px 0px;
      .rightone {
        padding-top: 10px;
        flex: 2;
      }
      .righttwo {
        padding-top: 10px;
        flex: 4;
      }
    }
  }
  .homecontainer-bottom {
    flex: 4;
    display: flex;
    flex-direction: row;
    padding: 10px 45px 10px 45px;
    .bottomdiv{
      display: flex;
      flex-direction: row;
        width: 100%;
      .mainbottom{
        width: 100%;
      }
    }
  }
}
</style>